<script setup name="dialog">
import { ref } from "vue"
import { ChangeHeaderIndex, resetHeaderIndex } from "@/composables/util"
import { useUserStore } from "@/store"
import { storeToRefs } from "pinia"

const userStore = useUserStore()
const { zIndex } = storeToRefs(userStore)
const showDialog = ref(false)

// 显示 Dialog
const open = () => {
  showDialog.value = true
  ChangeHeaderIndex()
}

// 关闭 Dialog
const close = () => {
  showDialog.value = false
  zIndex.value = 0
  resetHeaderIndex()
}

// 提交按钮
const submit = () => emit("submit")

// 按钮加载状态
const loading = ref(false)

// 开启按钮加载
const showLoading = () => (loading.value = true)

// 关闭按钮加载
const hideLoading = () => (loading.value = false)

const emit = defineEmits(["submit"])

defineProps({
  title: {
    type: String,
    default: "标题"
  },
  width: {
    type: Number,
    default: 40
  },
  destroyOnclose: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: "提交"
  },
  cancelText: {
    type: String,
    default: "取消"
  },
  topValue: {
    type: String,
    default: ""
  },
  appendToBody: {
    type: Boolean,
    default: false
  }
})
defineExpose({
  open,
  close,
  showLoading,
  hideLoading
})
</script>

<template>
  <el-dialog
    v-model="showDialog"
    :top="topValue"
    center
    :title="title"
    :width="`${width}%`"
    :close-on-click-modal="false"
    :show-close="false"
    :destroy-on-close="destroyOnclose"
    :close-on-press-escape="false"
    :append-to-body="appendToBody"
  >
    <div class="formDialog">
      <div class="body">
        <slot></slot>
      </div>
      <div class="actions">
        <el-button type="primary" @click="submit" :loading="loading">{{ confirmText }}</el-button>
        <el-button @click="close">{{ cancelText }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.formDialog {
  .body {
    // max-height: 60vh;
    overflow-y: auto;
  }
  .actions {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
